<template>
	<view class="filter-popup">
		<view class="popup-header">
			<text class="header-title">筛选</text>
			<text class="close-icon" @click="handleClose">×</text>
		</view>
		<view class="date-tabs">
			<view v-for="tab in dateTabs" :key="tab.type" :class="['tab-item', { active: currentTab === tab.type }]"
				@click="currentTab = tab.type">
				{{ tab.name }}
			</view>
		</view>
		<view class="date-picker">
			<picker class="date-btn" mode="date" start="1900-01-01" :end="new Date()" @change="handleStartDateSelect">
				{{BeginTime||'选择开始日期'}}
			</picker>
			<text class="separator">-</text>
			<picker class="date-btn" mode="date" start="1900-01-01" :end="new Date()" @change="handleEndDateSelect">
				{{EndTime || '选择结束日期'}}
			</picker>
		</view>

		<!-- 输入项区域 -->
		<view class="input-group">
			<input class="input-item" type="text" placeholder="请输入酒店名称" v-model="HotelName" />
			<input class="input-item" type="text" placeholder="请输入确认号" v-model="confirmNo" />
			<input class="input-item" type="text" placeholder="请输入入住人姓名" v-model="guestName" />
			<input class="input-item" type="text" placeholder="请输入预订人姓名" v-model="bookerName" />
		</view>

		<!-- 底部按钮区域 -->
		<view class="btn-group">
			<button class="reset-btn" @click="handleReset">重置</button>
			<button class="search-btn" @click="handleSearch">搜索</button>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	const dateTabs = ref([{
			name: '预定日期',
			type: 1,
		},
		{
			name: '入住日期',
			type: 2,
		},
		{
			name: '退房日期',
			type: 3
		},
	]);
	const currentTab = ref(1);
	const HotelName = ref('');
	const BeginTime = ref('')
	const EndTime = ref('')
	const confirmNo = ref('');
	const guestName = ref('');
	const bookerName = ref('');
	const emit =defineEmits(['close','filter'])
	const handleClose = () => {
		emit('close')
	};
	const handleStartDateSelect = (ev) => {
		console.log(ev.detail.value)
		BeginTime.value = ev.detail.value
	};
	const handleEndDateSelect = (ev) => {
		console.log(ev.detail.value)
		if (ev.detail.value < BeginTime.value) {
			return uni.showToast('结束日期不能小于开始日期')
		}
		EndTime.value = ev.detail.value
	};
	const handleReset = () => {
		HotelName.value = '';
		confirmNo.value = '';
		guestName.value = '';
		bookerName.value = '';
		EndTime.value=''
		BeginTime.value=''
	};
	const handleSearch = () => {
		const filterData = {
			HotelName: HotelName.value,
			confirmNo: confirmNo.value,
			guestName: guestName.value,
			bookerName: bookerName.value,
			DateType: currentTab.value,
			BeginTime:BeginTime.value,
			EndTime:EndTime.value
		};
		emit('filter',filterData)
	};
</script>

<style scoped>
	.filter-popup {
		width: 100%;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #eee;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.close-icon {
		font-size: 36rpx;
		color: #999;
	}

	.date-tabs {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.tab-item {
		font-size: 28rpx;
		padding: 10rpx 0;
		position: relative;
	}

	.tab-item.active {
		color: #007aff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4rpx;
		background-color: #007aff;
	}

	.date-picker {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.date-btn {
		flex: 0 0 40%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #666;

	}

	.separator {
		margin: 0 10rpx;
		font-size: 28rpx;
		color: #999;
	}

	.input-group {
		margin-bottom: 20rpx;
	}

	.input-item {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.input-item:last-child {
		margin-bottom: 0;
	}

	.btn-group {
		display: flex;
		justify-content: space-between;
		padding-bottom: 100rpx;
	}

	.reset-btn,
	.search-btn {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.reset-btn {
		border: 1rpx solid #eee;
		background-color: #fff;
	}

	.search-btn {
		background-color: #007aff;
		color: #fff;
	}
</style>